<template>
    <div class="content">
        <img src="../assets/fenge-5.jpg">
    <div class="box1">

        <div class="box2">
        <el-row >
            <el-col :span="10" :offset="7" >
                <el-tabs v-model="activeName"  >

                    <el-tab-pane label="登录" name="login">
                        <el-form :model="loginForm" :rules="rules" label-width="100px" ref="loginForm">
                            <el-form-item label="用户名" prop="username">
                                <el-input v-model="loginForm.username" placeholder="工号/学号"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input v-model="loginForm.password" type="password" placeholder="密码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="login()">提交</el-button>
                                <el-button @click="">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>

                    <!--<el-tab-pane label="修改密码" name="register">-->
                        <!--<Register></Register>-->
                    <!--</el-tab-pane>-->

                </el-tabs>
            </el-col>
        </el-row>
        </div>
    </div>
    </div>
</template>

<script>

import axios from 'axios'

export default {
    data(){
        return {
            activeName: 'login', //选项卡
            loginForm: {        //表单v-model的值
                username: '',
                password: ''
            },
            rules: { //验证规则
                username: [
                    { required: true, message: '用户名不为空', trigger: 'blur'},
                    { min: 4, max:10, message: '用户名在4到10位之间', trigger: 'blur'}
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        login: function() {
                var params = new URLSearchParams();
                params.append('account',this.loginForm.username );
                params.append('password',this.loginForm.password );
                var _this = this
                axios.post('/user/signin',params).then(function (res) {
                    if(res.data.msg=="用户未注册") {
                        alert("用户未注册");
                        console.log(res.data);
                    }else if(res.data.msg=="成功"){
                        console.log(res.data);
                        window.localStorage.setItem('user',res.data.signin_user.account)
                        _this.$store.commit('user',res.data.signin_user);
                        if(res.data.signin_user.account.length==4){
                            _this.$router.push({path:'/teacher'})
                        }else if(res.data.signin_user.account.length==10){
                            _this.$router.push({path:'/student'})
                        }
                        
                    }else {
                        console.log(res.data);
                        alert('密码错了')
                    }


                }).catch(function (err) {
                    console.log(err);
                })
            }
        }
}
</script>

<style scoped>

    .content img{
        width:1200px;
        margin-top:-2%;
        margin-bottom:2%;
    }
  .box1 {
      width:1200px;
      margin: 0 auto;
      -webkit-box-shadow:1px 1px 15px rgba(144, 144, 144, 1);
      box-shadow:1px 1px 15px rgba(144, 144, 144, 1);
      padding-top: 2%;
      padding-bottom:2%;
  }

  .box2{

      padding-top:2%;
      padding-bottom: 2%;
      margin: 0 auto;
      width:50%;
      -webkit-box-shadow:1px 1px 10px rgba(144, 144, 144, 1);
      box-shadow:1px 1px 10px rgba(144, 144, 144, 1);
  }


</style>
